<template>
  <view>
    <view class="goods-list">
      <view v-for="goods in goodsList" :key="goods.goods_id" @click="goToGoodsDetail(goods.goods_id)">
        <my-goods :goods="goods"></my-goods>
      </view>
    </view>
  </view>
</template>

<script>
import { getGoodsList } from '../../api/goodsList';
export default {
  data() {
    return {
      // 查询参数
      queryParams: {
        pagenum: 1,
        pagesize: 20,
        query: '',
        cid: ''
      },
      // 商品列表数据
      goodsList: [],
      // 商品总记录数
      total: 0,
      // 节流阀:默认打开
      loading: true
    };
  },
  onLoad(options) {
    if (options.cid) {
      this.queryParams.cid = options.cid;
    } else if (options.query) {
      this.queryParams.query = options.query;
    }
    // 获取商品列表数据
    this.getGoodsList();
  },
  // 当滚动条滚动到距离底部设定150px时就会触发这个触底的生命周期钩子函数
  onReachBottom() {
    // 如果当前页已经是最后一页数据了，就不要再发起请求
    if (this.queryParams.pagenum * this.queryParams.pagesize >= this.total) {
      return uni.showToast({
        title: '数据加载完毕',
        icon: 'none'
      });
    }
    // 如果当前是关闭状态
    if (!this.loading) return;
    // 让页码+1
    this.queryParams.pagenum += 1;
    // 请求最近页码对应的数据
    this.getGoodsList();
  },
  // 下拉刷新时自动触发的生命周期钩子函数
  onPullDownRefresh() {
    // 1. 重置关键数据
    this.queryParams.pagenum = 1;
    this.total = 0;
    this.loading = true; // 打开阀门
    this.goodsList = [];
    // 2.重新发起请求停止下拉刷新
    this.getGoodsList(() => {
      uni.stopPullDownRefresh();
    });
  },
  methods: {
    // 获取商品列表数据
    async getGoodsList(callback) {
      // 关闭节流阀
      this.loading = false;
      const { total, goods } = await getGoodsList(this.queryParams);
      this.total = total;
      // 合并当前页码数据和前面的数据
      this.goodsList = [...this.goodsList, ...goods];
      // 打开节流阀
      this.loading = true;
      // 下拉刷新数据请求完成时就停止下拉刷新的效果
      callback && callback();
    },
    // 点击商品组件去往详情
    goToGoodsDetail(goods_id){
       uni.navigateTo({
         url:`/subpkg/goods_detail/goods_detail?goods_id=${goods_id}`
       })
    }
  }
};
</script>

<style lang="scss">
.goods-list {
}
</style>
